<template>
    <div class="mod-home">
      <div class="wrapper">
        <div style="margin-bottom: 20px">
          <span style="font-size: 16px;margin-left: 16px"><b style="color: rgb(62, 64, 75)">今日经营概况</b></span>
          <span style="font-size: 12px;margin-left: 5px">最后更新时间：2018-12-1 10:10:10</span>
        </div>
        <div class="top">
          <div class="item">
            <el-card class="box-card">
              <div class="card-item">
                <p class="title">总销售额</p>
                <p class="value">{{totalSale}}</p>
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div class="card-item">
                <p class="title">待发货</p>
                <p class="value">{{waitingOrder}}</p>
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div class="card-item">
                <p class="title">订单总数</p>
                <p class="value">{{totalOrder}}</p>
              </div>
            </el-card>
          </div>
        </div>

        <div style=";margin-bottom: 20px">
          <span style="font-size: 16px;margin-left: 16px"><b style="color: rgb(62, 64, 75)">昨日访问概况</b></span>
        </div>
        <div class="top">
          <div class="item">
            <el-card class="box-card">
              <div class="card-item">
                <p class="title">打开次数</p>
                <p class="value">0</p>
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div class="card-item">
                <p class="title">人数/访问次数</p>
                <p class="value">0/0</p>
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div class="card-item">
                <p class="title">新用户数/累计用户数</p>
                <p class="value">{{newUsers}}/{{totalUsers}}</p>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <el-card>
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
          <div style="color: rgb(142, 142, 142);margin-bottom: 30px">营业额概况</div>
          <el-button-group>
            <el-button :plain="true" autoForce="true" size="small">近7日</el-button>
            <el-button :plain="true" size="small">近14日</el-button>
            <el-button :plain="true" size="small">近30天</el-button>
          </el-button-group>
        </div>
        <div id="J_chartLineBox" class="chart-box"></div>
      </el-card>
    </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        chartLine: null,
        totalSale: 0,
        newUsers: 0,
        totalUsers: 0,
        waitingOrder: 0,
        totalOrder: 0
      }
    },
    mounted () {
      this.initChartLine()

      this.$http({
        url: this.$http.adornUrl(`/home/dash/info`),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.categoryOptions = data.productCategroyTree
          console.log(data.productCategroyTree)
        }
      })
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartLine) {
        this.chartLine.resize()
      }
    },
    methods: {
      // 折线图
      initChartLine () {
        var option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      }
    }
  }
</script>

<style lang="scss">
    /*. {*/
      /*background-color: rgb(240,242,245);*/

    /*}*/

    .wrapper {
      .top {
        width: 100%;
        height: 140px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        .item {
          width: 30%;
          height: 120px;
          .el-card.box-card {
            width: 100%;
            height: 100%;
          }
          .card-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .title {
              color: rgb(142, 142, 142);
              font-size: 12px;
              text-align: left;
              margin-top: 10px;
              padding: 0;
            }

            .value {
              font-size: 30px;
              margin-top: 10px;
              padding: 0;

            }
          }
        }
      }
    }

    .chart-box {
      min-height: 400px;
    }
</style>

